import qiniu from './qiniu.js' //引用拍照七牛预览上传等插件

/*
    调用方式——

    完整的全套兼容pc端浏览器参数
        采用7牛完善的 web全兼容插件Plupload等 
        新增 orientation 类型 
        —— orientation:"" || 0 || 1 
            默认参数都需要 都是采用7牛上传图片
            0 表示支持第三方图片服务器接口等 ( 可移植等 )
            1 表示七牛全家桶( 需要附属额外插件  )
    ****************************************************
    myApp.qiniuWebcam({
        upload_btn: 'upload-btn',   //选择图片按钮的id
        upload_start_btn: 'upload-begin', //开始上传按钮的id
        upload_wrap: 'upload-wrap',      //拖拽上传的包裹层id
        flash_swf_url: 'http://cdn.staticfile.org/Plupload/2.1.1/Moxie.swf',  //flash插件的url，默认是'http://cdn.staticfile.org/Plupload/2.1.1/Moxie.swf'
        qiniu_uptoken_url: 'http://114.112.156.223:3000/qiniu/uptoken',   //获取token的url
        max_width: 720,    //宽度超过此值或高度超过此值的两倍，对图片进行压缩，默认为720
        quality:1-100,   //压缩质量
        zoom:1-9,  //缩放比例
        type:1, //种类 1 为拍照 camler 2 为获取file 
        orientation:0,//来源自移动端 默认为不限制 不限制走正常七牛途径
        multi_selection:true //默认支持多选 false 不支持多选
        upload_url:'', //上传的自定义服务器接口 
        readFileFunc: function (data){   //读取文件后的钩子函数，获取图片的预览图
            // 能获取选中的图片(base64 URI)，选择多张图片时分别多次回调
            var tmp_obj = {
                url: data
            };
            vue_this.preview_image.push(tmp_obj);
        },
        uploadedFunc: function (url){  //上传文件后的钩子函数，获取七牛图片的key
            // 能获取上传成功后的图片(七牛url的hash值，需拼接指定域前缀)与图片空间的域名，上传多张时分别多次回调
            vue_this.upload_image.push({
                url: 'http://' + qiniu_domain + '/' + url
            });
        }
    });

*/
myApp.qiniuWebcam = function(obj) {
    qiniu.set(obj)
}

/*Action Sheet
//封装全新的actions 弹层效果
//使用方式
********************
  const buttons = [
        {
            text:'拍照',
            color:'green',
            id:'upload-btn',
            container:'upload-wrap',
            onClick:function(){
                // $$('#upload-btn').trigger('click')
                // myApp.closeModal()
                vm.onPhotoCam('upload-btn',1) 
            }
        },
        {
            text:'选择文件',
            color:'green',
            id:'upload-file',
            container:'upload-wrap',
            onClick:function(){
                // myApp.closeModal()
               vm.onPhotoCam('upload-file',2) 
            }
        },
        { 
            text:'取消',
            id:'upload-cancel',
            container:'upload-wrap',
            onClick:function(){
                myApp.closeModal()
            }
        }
    ]
    myApp.actionsPhoto(buttons)
*/

myApp.actionsPhoto = function(target, params) {
    var _modalTemplateTempDiv = document.createElement('div');
    var toPopover = false,
        modal, groupSelector, buttonSelector;
    var app = myApp;
    var $ = $$;
    if (arguments.length === 1) {
        // Actions
        params = target;
    } else {
        // Popover
        if (app.device.ios) {
            if (app.device.ipad) toPopover = true;
        } else {
            if ($(window).width() >= 768) toPopover = true;
        }
    }
    params = params || [];

    if (params.length > 0 && !$.isArray(params[0])) {
        params = [params];
    }
    var modalHTML;
    if (toPopover) {
        var actionsToPopoverTemplate = app.params.modalActionsToPopoverTemplate ||
            '<div class="popover actions-popover" id="{{#if container}} container {{else}} upload-wrap {{/if}}">' +
            '<div class="popover-inner">' +
            '{{#each this}}' +
            '<div class="list-block">' +
            '<ul>' +
            '{{#each this}}' +
            '{{#if label}}' +
            '<li class="actions-popover-label {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-popover-bold{{/if}}" id="{{#if id}} id {{else}} upload-btn {{/if}}">{{text}}</li>' +
            '{{else}}' +
            '<li><a href="#" class="item-link list-button {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} {{#if bold}}actions-popover-bold{{/if}} {{#if disabled}}disabled{{/if}}" id="{{#if id}} id {{else}} upload-btn {{/if}}">{{text}}</a></li>' +
            '{{/if}}' +
            '{{/each}}' +
            '</ul>' +
            '</div>' +
            '{{/each}}' +
            '</div>' +
            '</div>';
        if (!app._compiledTemplates.actionsToPopover) {
            app._compiledTemplates.actionsToPopover = t7.compile(actionsToPopoverTemplate);
        }
        var popoverHTML = app._compiledTemplates.actionsToPopover(params);
        modal = $(app.popover(popoverHTML, target, true));
        groupSelector = '.list-block ul';
        buttonSelector = '.list-button';
    } else {
        if (app.params.modalActionsTemplate) {
            if (!app._compiledTemplates.actions) app._compiledTemplates.actions = t7.compile(app.params.modalActionsTemplate);
            modalHTML = app._compiledTemplates.actions(params);
        } else {
            var buttonsHTML = '';
            for (var i = 0; i < params.length; i++) {
                for (var j = 0; j < params[i].length; j++) {
                    var button = params[i][j];
                    if (j === 0) buttonsHTML += '<div class="actions-modal-group" id="' + (button.container ? button.container : 'upload-wrap') + '">';
                    var buttonClass = button.label ? 'actions-modal-label' : 'actions-modal-button';
                    var buttonId = button.id ? button.id : 'upload-btn';
                    if (button.bold) buttonClass += ' actions-modal-button-bold';
                    if (button.color) buttonClass += ' color-' + button.color;
                    if (button.bg) buttonClass += ' bg-' + button.bg;
                    if (button.disabled) buttonClass += ' disabled';
                    buttonsHTML += '<div class="' + buttonClass + '" id="' + buttonId + '">' + button.text + '</div>';
                    if (j === params[i].length - 1) buttonsHTML += '</div>';
                }
            }
            modalHTML = '<div class="actions-modal">' + buttonsHTML + '</div>';
        }
        _modalTemplateTempDiv.innerHTML = modalHTML;
        modal = $(_modalTemplateTempDiv).children();
        app.root.append(modal[0]).html();
        groupSelector = '.actions-modal-group';
        buttonSelector = '.actions-modal-button';
    }

    var groups = modal.find(groupSelector);
    groups.each(function(index, el) {
        var groupIndex = index;
        $(el).children().each(function(index, el) {
            var buttonIndex = index;
            var buttonParams = params[groupIndex][buttonIndex];
            var clickTarget;
            if (!toPopover && $(el).is(buttonSelector)) clickTarget = $(el);
            if (toPopover && $(el).find(buttonSelector).length > 0) clickTarget = $(el).find(buttonSelector);

            if (clickTarget) {
                clickTarget.on('click', function(e) {
                    // if (buttonParams.close !== false) app.closeModal(modal);
                    if (buttonParams.onClick) buttonParams.onClick(modal, e);
                });
            }
        });
    });
    if (!toPopover) app.openModal(modal);
    return modal[0];
};